<template>
	<view>


		<cu-custom v-show="top>=300 || !loading" bgColor="bg-white">
			<block slot="content">柚枝集</block>
		</cu-custom>



		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="5000" duration="500" :style="[{height:index_banner_height + 'rpx'}]" >
			<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="goBanner" :data-path="item.path"
				:data-type="item.path_type" :data-appid="item.appid">
				<image :src="item.pic" mode="aspectFill"></image>

			</swiper-item>
		</swiper>




		<!-- 导航栏 -->

	<!-- 	<view class="cu-list grid col-4 no-border">
			<view class="cu-item" v-for="(item,index) in nav" :key="index" @tap="goNav" :data-path="item.path"
				:data-type="item.path_type" :data-appid="item.appid">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<image :src="item.pic" mode="aspectFill" style="width: 60rpx;height: 60rpx;"></image>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view> -->
		<view class="flex justify-around margin-top">
			<view v-for="(item,index) in nav" :key="index" @tap="goNav" :data-path="item.path"
				:data-type="item.path_type" :data-appid="item.appid" class="flex flex-direction text-center">
				<image :src="item.pic" mode="aspectFill" style="width: 80rpx;height: 80rpx;"></image>
				<text class="text-bold">{{item.name}}</text>
			</view>
		</view>





		<!-- 横向滑动 -->
		<view class="">
			<view class="flex justify-between margin-top margin-lr">
				<view class="text-bold text-lg">
					<view>推荐</view>
					<view class="text-gray text-sm">recommend</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
			<view class="scroll-view-item_H " v-for="(item,index) in recommend" :key="index" @click="detail(item.id)">

				<image :src="item.thumb" mode="aspectFill" style="height: 130px;"
					class="shadow shadow-lg radius u-skeleton-rect"></image>
				<view class="padding-xs text-bold text-lg text-cut u-skeleton-rect">{{item.title}}</view>
			</view>

		</scroll-view>



		<!-- 文章列表 -->
		<view class="">
			<view class="flex justify-between margin-top margin-lr ">
				<view class="text-bold text-lg">
					<view>最新</view>
					<view class="text-gray text-sm">new</view>
				</view>
				<view class="text-gray text-sm text-bold">更多</view>
			</view>
		</view>





		<!-- 文章 -->
		<view class="">
			<dengje-posts :items="posts"></dengje-posts>

		</view>


		<!-- 加载 -->
		<u-loadmore :status="status" />
		<maoeu-loading ref="loading"></maoeu-loading>
	</view>

</template>

<script>
	import {
		BASE_API
	} from '@/config/base.js';
	export default {
		data() {
			return {
				index_banner_height:700,
				status: 'loadmore',
				isLoad: false,
				loading: true,
				firstNotice: {},
				page: 1,
				top: 0,
				title: 'Hello',
				recommend: [],
				posts: [],
				swiperList: [],
				nav: [],
				//设置默认的分享参数
				share: {
					title: '柚枝集',
					path: '/pages/index/index',
					imageUrl: '',
					desc: '',
					content: ''
				}

			}
		},
		async onLoad() {

			await this.$onLaunched;
			this.getBanner();
			this.getRecommend();
			this.getPosts();
			this.getNav();
			this.getNotice();
			this.getConfig();
			

		},
		onPageScroll(res) {
			this.top = res.scrollTop;

		},
		onReachBottom() {
			this.page = this.page + 1;;
			this.getPosts();
		},
		methods: {

			getBanner() {
				const _this = this;
				_this.$apiResquest({
					url: 'cms/banner',
					method: 'GET'
				}).then(function(res) {
					console.log(90)
					console.log(res);
					_this.swiperList = res.data;
					

				})
			},
			getPosts() {

				const _this = this;
				_this.status = 'loading';
				var page = _this.page;
				_this.$apiResquest({
					url: 'cms/post',
					method: 'GET',
					query: {
						page
					}
				}).then(function(res) {
					if (res.data.data.length <= 0) {
						_this.status = 'nomore';
					}
					_this.posts = _this.posts.concat(res.data.data)

					_this.$refs.loading.closeLoading()

				})
			},
			detail: function(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			// 推荐文章
			getRecommend() {
				const _this = this;
				_this.$apiResquest({
					url: 'cms/post/recommend',
					method: 'GET'
				}).then(function(res) {

					_this.recommend = res.data

				})
			},
			goBanner(e) {
				let path = e.currentTarget.dataset.path
				let type = e.currentTarget.dataset.type
				let appid = e.currentTarget.dataset.appid
				console.log(e)
				console.log('图文导航栏跳转' + type);
				// 0=小程序内；1=跳网页；2=跳小程序
				if (type == 0) {
					console.log(0)
					uni.navigateTo({
						url: path
					})
				} else if (type == 1) {
					
					uni.navigateTo({
						url: '../web/web?url=' + path,
					
					})
				} else if (type == 2) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: path,
						extraData: {
					
						},
						success(res) {
							// 打开成功
						}
					})
				}
			},
			// 获取通知
			getNotice() {
				const _this = this;
				_this.$apiResquest({
					url: 'cms/firstNotice',
					method: 'GET'
				}).then(function(res) {

					console.log(res);
					_this.firstNotice = res.data

				})
			},
			goNotice(e) {

				let id = e
				uni.navigateTo({
					url: '../notice/notice?id=' + id
				})
			},
			getConfig(){
				const _this = this;
				console.log(123)
				console.log(_this.CmsConfig)
				_this.index_banner_height = _this.CmsConfig.index_banner_height
			},
			// 图文导航
			getNav() {
				const _this = this;
				_this.$apiResquest({
					url: 'cms/nav',
					method: 'GET'
				}).then(function(res) {

					console.log(res);
					_this.nav = res.data

				})
			},

			// 图文导航栏跳转
			goNav: function(e) {
				let path = e.currentTarget.dataset.path
				let type = e.currentTarget.dataset.type
				let appid = e.currentTarget.dataset.appid
				console.log(e)
				console.log('图文导航栏跳转' + type);
				// 0=小程序内；1=跳网页；2=跳小程序
				if (type == 0) {
					console.log(0)
					uni.navigateTo({
						url: path
					})
				} else if (type == 1) {
					
					uni.navigateTo({
						url: '../web/web?url=' + path,
					
					})
				} else if (type == 2) {
					uni.navigateToMiniProgram({
						appId: appid,
						path: path,
						extraData: {
					
						},
						success(res) {
							// 打开成功
						}
					})
				}

			},
			
		}
	}
</script>

<style>
	/* 横向滑动 */
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 50%;
		font-size: 36rpx;
		margin: 8px;
		border-radius: .4rem;
		/* overflow: hidden; */

	}

	/* end 横向滑动 */
</style>
